<template>
  <!-- sign -->
  <div id="sign">
    <div class="hi">Hi! 欢迎来到熊猫采集</div>
    <div id="sign-form">
      <div class="logo">
        <img src="@/assets/logo.jpeg" alt="" />
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        label-position="top"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <div class="msg">注：需输入正确的支付宝账号，否则无法提现！！</div>
        <el-form-item label="" prop="user">
          <el-input
            v-model="ruleForm.user"
            prefix-icon="el-icon-user-solid"
            placeholder="支付宝账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            prefix-icon="el-icon-s-cooperation"
            placeholder="支付宝姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >绑定支付宝</el-button
          >
          <!-- <el-button @click="$router.push({ name: 'login' })">登录</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import comm from "@/mixins/comm.js";
export default {
  mixins: [comm],
  data() {
    var checkuser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("支付宝账号不能为空"));
      } else if (
        !/^1[3456789]\d{9}$/.test(value) &&
        !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)
      ) {
        return callback(new Error("支付宝账号格式不正确"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入支付宝姓名"));
      } else if (!/^[\u4e00-\u9fff]+$/.test(value)) {
        callback(new Error("支付宝姓名格式不正确"));
      } else {
        callback();
      }
    };
    return {
      options: [
        {
          value: "其他/朋友推荐",
        },
        {
          value: "推客帮",
        },
        {
          value: "元宝帮",
        },
      ],
      value: "",
      ruleForm: {
        pass: "",
        user: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "change" }],
        user: [{ validator: checkuser, trigger: "change" }],
        platform: [
          { required: true, message: "选择来源平台", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    const user = JSON.parse(localStorage.getItem("pandaSms_user"));
    if (user) {
      this.ruleForm.user = user.phone;
      this.ruleForm.pass = user.pwd;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.deng) {
            this.$msgOk("正在登录中");
            return;
          }
          this.deng = true;
          const loginSms = () => {
            this.$sdk
              .post("smscoolie/login", {
                phone: this.ruleForm.user,
                pwd: this.ruleForm.pass,
              })
              .then((res) => {
                if (res.data.code == 0) {
                  localStorage.setItem(
                    "pandaSms_user",
                    JSON.stringify({
                      phone: this.ruleForm.user,
                      pwd: this.ruleForm.pass,
                    })
                  );
                  this.$router.push({ name: "details" });
                }
              });
            // }
          };

          this.$sdk
            .post("checkPhone", {
              phone: this.ruleForm.user,
              name: this.ruleForm.pass,
            })
            .then((res) => {
              setTimeout(() => {
                this.deng = false;
              }, 1000);
              if (
                res.data &&
                res.data.data &&
                res.data.data.subCode === "BALANCE_IS_NOT_ENOUGH"
              ) {
                loginSms();
                // 校验通过 进行注册登录
              } else {
                this.$msgError("支付宝账号或姓名错误");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less">
.el-select {
  width: 200px;
}
#sign {
  .el-input__inner {
    height: 55px;
    font-size: 15px;
    padding-left: 40px;
  }
  .el-input__prefix i {
    font-size: 18px;
  }
}
.btn {
  margin-top: 35px;
  .el-form-item__content {
    .el-button {
      width: 100%;
      margin-bottom: 20px;
      border-radius: 15px;
      padding: 15px 20px;
      background-color: #029e17;
      border-color: #029e17;
      font-size: 18px;
    }
  }
}
</style>
<style lang="less" scoped>
.hi {
  position: absolute;
  color: #fff;
  top: 50px;
  left: 20px;
  font-size: 23px;
}
#sign {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // 背景图片样式
  background-image: url("../assets/bgcolor.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  .msg {
    font-size: 14px;
    margin: 10px 0;
  }
}

#sign-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  color: #029e17;
  // 表单 box-shadow 样式 好看
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
  h3 {
    font-size: 30px;
  }
}
</style>
